<template>
	<view class="health-center">
		<view class="healthBox">
			<view @click="toHealthWay">

				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2558.png">
				</image>
				<text>健康档案</text>
			</view>
			<view>
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2561.png">
				</image>
				<text>健康检测</text>
			</view>
			<view @click="toOrganization">
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2564.png">
				</image>
				<text>在线签约</text>
			</view>
		</view>

		<view class="iconBox">
			<view>
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2567.png">
				</image>
				<text>健康头条</text>
			</view>
			<view>
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2570.png">
				</image>
				<text>慢病护理</text>
			</view>
			<view>
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2573.png">
				</image>
				<text>用药查询</text>
			</view>
			<view>
				<image
					src="https://cdn8.axureshop.com/demo/1689476/images/%E9%A6%96%E9%A1%B5-%E5%B7%B2%E7%AD%BE%E7%BA%A6/u2576.png">
				</image>
				<text>用药提醒</text>
			</view>
		</view>
	</view>

	<!-- 弹窗部分(已取消) -->
	<view>

		<!-- 使用 button 插槽自定义按钮 -->
		<u-modal width="520rpx" :show="show" title="" content="签约后可以使用此功能，立即签约吗？" :showCancelButton="false"
			:showConfirmButton="false" @close="show = false" class="text-color">

			<!-- 自定义底部按钮 -->
			<template #confirmButton>
				<view class="modal-footer">
					<text class="btn cancel" @tap="handleCancel">稍后</text>
					<view class="divider"></view>
					<text class="btn confirm" @tap="handleConfirm">去签约</text>
				</view>
			</template>
		</u-modal>
	</view>
</template>

<script setup>
import {
	ref
} from 'vue';
import {
	useUserStore
} from '../../store/user';

const userStore = useUserStore();


function toOrganization() {
	uni.navigateTo({
		url: '/homepackge/pages/nearbyLnstitutions/nearbyLnstitutions'
	})
}

// 健康档案
function toHealthWay() {
	uni.navigateTo({
		url: `/pages/many-health-message/many-health-message?userId=${userStore.userId}`
	})
}






const show = ref(false);

const handleConfirm = () => {
	// console.log('确认');
	show.value = false;
	uni.navigateTo({
		url: '/homepackge/pages/new-record/new-record'
	})
};
const handleCancel = () => {
	console.log('取消');
	show.value = false;
};
</script>

<style scoped lang="scss">
.iconBox {
	display: flex;
	justify-content: space-between;
	margin-bottom: 20rpx;

	view {
		width: 160rpx;
		height: 100rpx;
		font-size: 14px;
		// border:1px solid black;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-bottom: 40rpx;
	}

	image {
		width: 32rpx;
		height: 32rpx;
		margin-bottom: 15rpx;
	}
}

.healthBox {
	display: flex;
	justify-content: space-between;
	margin-bottom: 40rpx;

	// position: relative;
	view {
		color: #fff;
		width: 200rpx;
		height: 178rpx;
		margin-top: 30rpx;
		background-color: rgba(253, 219, 120, 1);
		border-radius: 12px;
		font-size: 14px;
		// position: absolute;
		// 			right: 20px;
	}

	view:first-child {
		background: #fa746b;
	}

	view:last-child {
		background-color: rgba(40, 208, 148, 1);
	}

	image {
		width: 44rpx;
		height: 44rpx;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		margin-top: 50rpx;
		margin-left: 77rpx;
		margin-bottom: 15rpx;

	}

	text {
		margin-left: 50rpx;
		// margin-bottom: 10rpx;
	}
}


.health-center {
	margin-top: 20rpx;
	padding: 0 40rpx;
	background: #fff;
}

// 弹窗部分
.text-color {
	color: #333333;
	// font-size:
}

.modal-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	// padding: 0 40rpx;
	height: 100rpx;
	border-top: 1rpx solid #eee;
	padding: 0;
}

.btn {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
}

.cancel {
	color: #606266;
}

.confirm {
	color: #2979ff;
}

.divider {
	width: 1rpx;
	height: 100%;
	background-color: #dcdfe6;
}

.u-modal__button-group--confirm-button {
	padding: 0;
}
</style>